<template>
  <div class="content">
    <headline v-bind:title="title"></headline>
    <div class="top">
      <el-form>
        <el-input
          v-model="orderNo"
          placeholder="请输入订单号"
          class="dan"
        ></el-input>
        <el-button type="primary" @click="sousuo()" class="hao">查询</el-button>
      </el-form>
    </div>
    <div class="data-table">
      <el-table
        :data="queryList.data"
        border
        style="width: 100%"
        max-height="500"
      >
        <el-table-column prop="orderNo" label="订单号"></el-table-column>
        <el-table-column prop="receiverName" label="收件人"></el-table-column>
        <el-table-column prop="statusDesc" label="订单状态"></el-table-column>
        <el-table-column prop="payment" label="订单总价"></el-table-column>
        <el-table-column prop="createTime" label="创建时间"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button @click="chakan(scope.row)" type="text" size="small"
              >查看</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <paging v-bind:queryList="queryList"></paging>
  </div>
</template>
<script>
import headline from "../headline.vue";
import paging from "../paging.vue";

export default {
  components: { headline, paging },
  data() {
    return {
      title: "订单管理",
      queryList: { data: [], total: 0, pageNum: 1, pageSize: 10 },
      orderNo: "",
    };
  },
  mounted() {
    this.dingdan();
  },
  methods: {
    handleSizeChange(val) {
      this.queryList.pageSize = val;
      this.dingdan();
    },
    handleCurrentChange(val) {
      this.queryList.pageNum = val;
      this.dingdan();
    },
    dingdan() {
      let postData = this.qs.stringify({
        pageSize: this.queryList.pageSize,
        pageNum: this.queryList.pageNum,
      });
      this.axios({
        method: "POST",
        url: "/api/manage/order/list.do",
        data: postData,
      }).then((res) => {
        this.queryList.data = res.data.data.list;
        this.queryList.total = res.data.data.total;
      });
    },
    sousuo() {
      if (this.orderNo === "") {
        this.dingdan();
        return;
      }
      let postData = this.qs.stringify({
        orderNo: this.orderNo,
      });
      this.axios({
        method: "POST",
        url: "/api/manage/order/search.do",
        data: postData,
      }).then((res) => {
        if (res.data.status === 1) {
          this.queryList.data = [];
          this.queryList.total = 0;
          this.$message.error(res.data.msg);
        } else {
          this.queryList.data = res.data.data.list;
          this.queryList.total = res.data.data.total;
        }
      });
    },
    chakan(row) {
      this.$router.push({ name: "lineitem", params: { id: row.orderNo } });
    },
  },
};
</script>

<style scoped lang="less">
.top {
  margin-top: 10px;
}
.dan,
.hao {
  margin-left: 20px;
}
.dan {
  width: 200px;
}
</style>